<template>
  <el-card class="box-card-component">
    <div slot="header" class="box-card-header">
      <img :src="backImg" alt="">
    </div>
    <div style="position:relative;">
      <pan-thumb :image="headImg" class="panThumb" />
      <mallki class-name="mallki-text" :text="nick" />
      <el-row style="padding-top:35px;text-align: center;font-size: 17px">
        <el-col :span="12">
          <span style="color: #ff4757;font-weight: bold;font-size: 18px">{{ submit }} </span>次提交
        </el-col>
        <el-col :span="12">
          <span style="color: #27ae60;font-weight: bold;font-size: 18px">{{ solved }} </span>题正确
        </el-col>
      </el-row>
      <el-divider />
      <el-row>
        <p style="color: #7f8c8d">个性签名：</p>
        <span style="margin-left: 2rem;color: #57606f">{{ description }}</span>
      </el-row>
    </div>
  </el-card>
</template>

<script>
import PanThumb from '@/components/PanThumb'
import Mallki from '@/components/TextHoverEffect/Mallki'
import { getUserId } from '@/utils/auth'
import { personCard } from '@/api/user'

export default {
  components: { PanThumb, Mallki },

  filters: {
    statusFilter(status) {
      const statusMap = {
        success: 'success',
        pending: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      backImg: 'https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png',
      headImg: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80',
      nick: '未命名',
      submit: 0,
      solved: 0,
      description: '这个人太懒了，还没有签名。',
      userId: -1
    }
  },
  watch: {
    $route: {
      handler() {
        this.userId = getUserId()
        if (this.$route.query.userId !== undefined) {
          this.userId = this.$route.query.userId
        }
        if (this.userId === undefined) {
          this.$message.error('出错了，请稍候再试吧！')
          this.$router.push('/')
        } else {
          this.personCard()
        }
      },
      deep: true
    }
  },
  mounted() {
    this.userId = getUserId()
    if (this.$route.query.userId !== undefined) {
      this.userId = this.$route.query.userId
    }
    if (this.userId === undefined) {
      this.$message.error('出错了，请稍候再试吧！')
      this.$router.push('/')
    } else {
      this.personCard()
    }
  },
  methods: {
    personCard() {
      personCard({ userId: this.userId }).then(res => {
        this.backImg = res.data.bingImage
        this.headImg = res.data.headPortrait
        this.nick = res.data.nick || '未命名'
        this.submit = res.data.submit || 0
        this.solved = res.data.solved || 0
        this.description = res.data.description || '这个人太懒了，还没有签名。'
      }).catch(err => {
        if (err.code === 'A0201' || err.code === 'A0202') {
          this.$router.push('/')
        }
      })
    }
  }
}
</script>

<style lang="scss" >
.box-card-component{
  .el-card__header {
    padding: 0px!important;
  }
}
</style>
<style lang="scss" scoped>
.box-card-component {
  .box-card-header {
    position: relative;
    height: 220px;
    img {
      width: 100%;
      height: 100%;
      transition: all 0.2s linear;
      &:hover {
        transform: scale(1.1, 1.1);
        filter: contrast(130%);
      }
    }
  }
  .mallki-text {
    position: absolute;
    z-index: 999;
    top: 0px;
    right: 0px;
    font-size: 20px;
    font-weight: bold;
  }
  .panThumb {
    z-index: 100;
    height: 70px!important;
    width: 70px!important;
    position: absolute!important;
    top: -50px;
    left: 0px;
    border: 5px solid #ffffff;
    background-color: #fff;
    margin: auto;
    box-shadow: none!important;
    ::v-deep .pan-info {
      box-shadow: none!important;
    }
  }
  @media only screen and (max-width: 1510px){
    .mallki-text{
      display: block;
    }
  }
}
</style>
